.welcome {
  &-left {
    position: absolute;
    left: 20%;
    top: 60px;
    h1 {
      margin-bottom: 16px;
      font-size: 44px;
    }
  }
  &-banner {
    position: relative;
    height: 320px;
    background: url("@/assets/banner-bg.png") no-repeat left top;
    > img {
      position: absolute;
      right: 20%;
      top: 0px;
      width: 400px;
    }
  }
  &-container {
    padding: 40px 20%;
    &-header {
      position: relative;
      padding: 10px;
      margin-bottom: 24px;
      > h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      > p {
        font-size: 14px;
        color: #4e5969;
      }
      &-input {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
  &-list {
    &-box {
      height: 252px;
      padding: 10px 16px;
      box-sizing: border-box;
    }
    &-item {
      float: left;
      height: 104px;
      width: calc(25% - 18px);
      margin-right: 24px;
      margin-bottom: 24px;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
      border-image: linear-gradient(
          180deg,
          #ffffff 0%,
          rgba(255, 255, 255, 0) 100%
        )
        1;
      background: linear-gradient(180deg, #f3f5f8 0%, #ffffff 100%);
      border-radius: 8px;
      padding: 16px;
      box-sizing: border-box;
      &:nth-of-type(4n + 4) {
        margin-right: 0px;
      }
    }
    .item-logo-name {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }
}
